[data-type="file"] {

  & .formkit-no-files,
  & .formkit-file-list {
    padding: var(--fk-padding-input);
    margin: 0;
  }

  & .formkit-no-files,
  & .formkit-file-item {
    display: flex;
    flex-grow: 1;
    align-items: center;
    font-size: var(--fk-font-size-input);
    position: relative;
  }


  & .formkit-no-files+.formkit-no-files,
  & .formkit-file-item+.formkit-file-item {
    margin-top: var(--fk-padding-input-t);
  }

  & .formkit-inner .formkit-file-item-icon,
  & .formkit-inner .formkit-no-files-icon {
    width: 1em;
    margin-right: 0.5em;
  }

  & .formkit-file-item .formkit-file-remove {
    appearance: none;
    background: transparent;
    border: none;
    font-size: 0;
    margin-left: auto;
    padding: 0;
    position: relative;
    z-index: 3;
    cursor: pointer;

    &:hover {
      color: var(--fk-color-danger);
    }

    & .formkit-file-remove-icon {
      width: 1em;
      font-size: 1rem;
    }
  }

  & .formkit-no-files {
    color: var(--fk-color-placeholder);

    &::before {
      background-color: var(--fk-color-placeholder);
    }
  }

  & .formkit-file-list {
    width: 100%;

    &[data-has-multiple] {
      margin-bottom: calc(var(--fk-padding-input-b) + var(--fk-font-size-remove) * 1.1);

      & .formkit-file-item {
        line-height: var(--fk-line-height-input);
      }
    }
  }

  & .formkit-input {
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 2;
    color: transparent;

    &::file-selector-button {
      appearance: none;
      font-size: 0;
      padding: 0;
      border: 0;
    }

    &[data-file-hover] {
      animation: fk-glow 0.75s infinite alternate;
    }
  }

  & [data-has-multiple="true"]~.formkit-file-remove {
    appearance: none;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    font-size: var(--fk-font-size-remove);
    color: var(--fk-color-primary);
    bottom: calc(var(--fk-padding-input-b) + (1em - var(--fk-font-size-remove)));
    left: calc(var(--fk-padding-input-l) + (1em - var(--fk-font-size-remove)));
    display: block;
    z-index: 5;
    cursor: pointer;

    &:hover {
      color: var(--fk-color-danger);
    }
  }
}